<!DOCTYPE html>
<!--  pb-line.html的PC端-->
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0">
    <!-- 测试 清缓存，正式要去掉 -->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>EasyWeb后台开发框架</title>
    <!--    <meta http-equiv="refresh" content="1">-->
    <!--    iview-css-->
    <link rel="stylesheet" href="/kbs/assets/libs/iview/iview.css"/>

    <!-- js部分 -->
    <!--<script type="text/javascript" src="/kbs/assets/libs/layui/layui.js"></script>-->
    <script type="text/javascript" src="/kbs/assets/libs/jquery/jquery.js"></script>
    <script src="/kbs/assets/libs/vue/vue.js"></script>
    <script type="text/javascript" src="/kbs/assets/libs/iview/iview.js"></script>
    <script type="text/javascript" src="/kbs/assets/libs/echarts/echarts.js"></script>
    <script type="text/javascript" src="/kbs/assets/libs/echarts/echartsTheme.js"></script>
    <script type="text/javascript" src="/kbs/assets/js/util.js?"+Math.random();></script>
    <script type="text/javascript" src="/kbs/assets/js/tools.js?"+Math.random();></script>

    <!--    iview-icon-->
    <!--    iview用的是ionicons4.0.0.2版本的woff2-->
    <!--    <link href="https://cdn.bootcss.com/ionicons/4.0.0-2/css/ionicons.css" rel="stylesheet">-->
    <!--    <link rel="stylesheet" href="/kbs/assets/libs/iview/icon.css"/>-->

    <!--    layui-css-->
    <!--    <link rel="stylesheet" href="/kbs/assets/libs/layui/css/layui.css"/>-->

    <!--    admin-css-->
    <!--    <link rel="stylesheet" href="/kbs/assets/module/admin.css?v=312"/>-->

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

<div id="app">
    <template>
        <div style="background:#eee;padding: 7px">
            <Row>
                <i-col span="24">
                    <Card style="height: 63px">
                        <div>
                            <Row>
                                <i-col span="3" style="line-height: 30px">
                                    <i-select size="default" v-model="selected" :label-in-value="true"
                                              @on-change="changge">
                                        <i-option v-for="line in line " :value="line.code" :label="line.name">
                                            {{line.name}}
                                        </i-option>
                                    </i-select>
                                </i-col>
                                <i-col span="18"
                                       style="text-align: center;color:#000 ;font-size: 27px; line-height: 30px">
                                    创维自主MES系统 线体看板
                                </i-col>
                                <!--<i-col span="18" style="text-align: center;color:#000 ;font-size: 27px">
                                    创维自主MES系统 平板厂 {{linename}} 实时生产信息看板
                                </i-col>-->
                                <i-col span="3">
                                    <div id="time" style="line-height: 30px"></div>
                                </i-col>
                            </Row>
                        </div>
                    </Card>
                </i-col>
            </Row>
            <Row>
                <i-col span="15">
                    <Card style="margin-top: 5px">
                        <!--                        <Row>-->
                        <!--                            <i-col span="4" style="line-height: 30px">-->
                        <!--                                <div style="text-align: center">-->
                        <!--                                    <div style="color: rgba(0, 0, 0, .55); font-size: 14px">工单号</div>-->
                        <!--                                    <div style="color: rgba(0, 0, 0, .85); font-size: 18px">{{jibenxinxi.id}}</div>-->
                        <!--                                </div>-->
                        <!--                            </i-col>-->
                        <!--                            <i-col span="4" style="line-height: 30px">-->
                        <!--                                <div style="text-align: center">-->
                        <!--                                    <div style="color: rgba(0, 0, 0, .55); font-size: 14px">订单号</div>-->
                        <!--                                    <div style="color: rgba(0, 0, 0, .85); font-size: 18px">{{jibenxinxi.maktx}}</div>-->
                        <!--                                </div>-->
                        <!--                            </i-col>-->
                        <!--                            <i-col span="4" style="line-height: 30px">-->
                        <!--                                <div style="text-align: center">-->
                        <!--                                    <div style="color: rgba(0, 0, 0, .55); font-size: 14px">机型</div>-->
                        <!--                                    <div style="color: rgba(0, 0, 0, .85); font-size: 18px">{{jibenxinxi.maktx}}</div>-->
                        <!--                                </div>-->
                        <!--                            </i-col>-->
                        <!--                            <i-col span="4" style="line-height: 30px">-->
                        <!--                                <div style="text-align: center">-->
                        <!--                                    <div style="color: rgba(0, 0, 0, .55); font-size: 14px">线长</div>-->
                        <!--                                    <div style="color: rgba(0, 0, 0, .85); font-size: 18px">{{jibenxinxi.headPerson}}-->
                        <!--                                    </div>-->
                        <!--                                </div>-->
                        <!--                            </i-col>-->
                        <!--                            <i-col span="4" style="line-height: 30px">-->
                        <!--                                <div style="text-align: center">-->
                        <!--                                    <div style="color: rgba(0, 0, 0, .55); font-size: 14px">人数</div>-->
                        <!--                                    <div style="color: rgba(0, 0, 0, .85); font-size: 18px">{{jibenxinxi.headPerson}}-->
                        <!--                                    </div>-->
                        <!--                                </div>-->
                        <!--                            </i-col>-->
                        <!--                            <i-col span="4" style="line-height: 30px">-->
                        <!--                                <div style="text-align: center">-->
                        <!--                                    <div style="color: rgba(0, 0, 0, .55); font-size: 14px">生产日期</div>-->
                        <!--                                    <div style="color: rgba(0, 0, 0, .85); font-size: 18px">{{jibenxinxi.createTime}}-->
                        <!--                                    </div>-->
                        <!--                                </div>-->
                        <!--                            </i-col>-->
                        <!--                        </Row>-->
                        <Row style="margin-top: 15px">
                            <i-col span="4" style="line-height: 30px">
                                <div style="text-align: center">
                                    <div style="color: rgba(0, 0, 0, .55); font-size: 16px; color: #009688">总排产量</div>
                                    <div style="color: rgba(0, 0, 0, .85); font-size: 35px; color: #009688; margin: 12px">
                                        {{jibenxinxi.gamng}}
                                    </div>
                                </div>
                            </i-col>
                            <i-col span="4" style="line-height: 30px">
                                <div style="text-align: center">
                                    <div style="color: rgba(0, 0, 0, .55); font-size: 16px; color: #009688">总投入量</div>
                                    <div style="color: rgba(0, 0, 0, .85); font-size: 35px; color: #009688; margin: 12px">
                                        {{jibenxinxi.tlmng}}
                                    </div>
                                </div>
                            </i-col>
                            <i-col span="4" style="line-height: 30px">
                                <div style="text-align: center">
                                    <div style="color: rgba(0, 0, 0, .55); font-size: 16px; color: #009688">总产出量</div>
                                    <div style="color: rgba(0, 0, 0, .85); font-size: 35px; color: #009688; margin: 12px">
                                        {{jibenxinxi.wgmng}}
                                    </div>
                                </div>
                            </i-col>

                            <i-col span="4" style="line-height: 30px">
                                <div style="text-align: center">
                                    <div style="color: rgba(0, 0, 0, .55); font-size: 16px; color: #009688">单小时产出</div>
                                    <div style="color: rgba(0, 0, 0, .85); font-size: 30px; color: #009688; margin: 12px">
                                        {{jibenxinxi.hourWgmng}}
                                    </div>
                                </div>
                            </i-col>
                            <i-col span="4" style="line-height: 30px">
                                <div style="text-align: center">
                                    <div style="color: rgba(0, 0, 0, .55); font-size: 16px; color: #009688">达成率</div>
                                    <div style="color: rgba(0, 0, 0, .85); font-size: 30px; color: #009688; margin: 12px">
                                        {{jibenxinxi.dachenglv}}
                                    </div>
                                </div>
                            </i-col>
                            <i-col span="4" style="line-height: 30px">
                                <div style="text-align: center">
                                    <div style="color: rgba(0, 0, 0, .55); font-size: 16px; color: #009688">直通率</div>
                                    <div style="color: rgba(0, 0, 0, .85); font-size: 30px; color: #009688; margin: 12px">
                                        {{jibenxinxi.passLv}}
                                    </div>
                                </div>
                            </i-col>
                        </Row>
                        <Row>
                            <i-col span="24">
                                <div id="hdqkyc" style="width: 100%;height: 254px;margin-top: 27px"></div>
                            </i-col>
                        </Row>
                    </Card>
                </i-col>
                <i-col span="9">
                    <Row>
                        <i-col span="24">
                            <Card style="margin-top: 5px ; margin-left: 5px">
                                <Row>
                                    <i-col span="6" style="line-height: 30px">
                                        <Row>
                                            <i-col span="12">
                                                <div style="text-align: center">
                                                    <div style="color: rgba(0, 0, 0, .55); font-size: 14px">线体</div>
                                                </div>
                                            </i-col>
                                            <i-col span="12">
                                                <div style="text-align: center">
                                                    <div style="color: rgba(0, 0, 0, .85); font-size: 14px">
                                                        {{linename}}
                                                    </div>
                                                </div>
                                            </i-col>
                                        </Row>
                                    </i-col>
                                    <i-col span="6" style="line-height: 30px">
                                        <Row>
                                            <i-col span="12">
                                                <div style="text-align: center">
                                                    <div style="color: rgba(0, 0, 0, .55); font-size: 14px">线长</div>
                                                </div>
                                            </i-col>
                                            <i-col span="12">
                                                <div style="text-align: center">
                                                    <div style="color: rgba(0, 0, 0, .85); font-size: 14px">
                                                        {{jibenxinxi.headPerson}}
                                                    </div>
                                                </div>
                                            </i-col>
                                        </Row>
                                    </i-col>
                                    <i-col span="6" style="line-height: 30px">
                                        <Row>
                                            <i-col span="12">
                                                <div style="text-align: center">
                                                    <div style="color: rgba(0, 0, 0, .55); font-size: 14px">人数</div>
                                                </div>
                                            </i-col>
                                            <i-col span="12">
                                                <div style="text-align: center">
                                                    <div style="color: rgba(0, 0, 0, .85); font-size: 14px">
                                                        <!--                                                        {{jibenxinxi.headPerson}}-->
                                                        {{jibenxinxi.personNumber}}
                                                    </div>
                                                </div>
                                            </i-col>
                                        </Row>

                                    </i-col>
                                    <i-col span="6" style="line-height: 30px">
                                        <Row>
                                            <i-col span="12">
                                                <div style="text-align: center">
                                                    <div style="color: rgba(0, 0, 0, .55); font-size: 14px">生产日期</div>
                                                </div>
                                            </i-col>
                                            <i-col span="12">
                                                <div style="text-align: center">
                                                    <div style="color: rgba(0, 0, 0, .85); font-size: 14px">
                                                        {{dateNow}}
                                                    </div>
                                                </div>
                                            </i-col>
                                        </Row>
                                    </i-col>
                                </Row>
                            </Card>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col span="24">
                            <Card style="margin-top: 5px ; margin-left: 5px">
                                <i-Table stripe border max-height="367" size="small" :columns="columns1"
                                         :data="data1"></i-Table>
                            </Card>
                        </i-col>
                    </Row>
                </i-col>
            </Row>
            <Row>
                <i-col span="24">
                    <Card style="margin-top: 5px ;">
                        <i-Table stripe border max-height="290" size="small" :columns="columns2"
                                 :data="data2"></i-Table>
                    </Card>
                </i-col>
            </Row>
        </div>
    </template>
</div>

</body>


<script>
    // 动态展示时间
    window.setInterval("yvan.getDynamicTime()", 1000);//每隔1秒，调用一次getDateDemo()
    // 制作图表
    function getMycharts(myData, myTimeData) {

        // 渲染活动情况预测
        var myCharts = echarts.init(document.getElementById('hdqkyc'), myEchartsTheme);
        // var mData = [50, 100, 150, 80, 120, 150, 200, 250, 220, 250, 300, 350, 400, 380, 440, 450, 500, 550, 500];
        var mData = myData;

        // 之前的图标option -- 面积图
        /*var option = {
            title: {
                // text: '有望达到预期',
                subtext: '时段产出',
                textStyle: {
                    color: '#000'
                }
            },
            tooltip: {
                trigger: "axis"
            },
            xAxis: [{
                type: "category",
                boundaryGap: !1,
                // data: ["07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00"]
                data: myTimeData
            }],
            yAxis: [{
                type: "value"
            }],
            series: [{
                name: "电视产出量",
                type: "line",
                smooth: !0,
                itemStyle: {
                    normal: {
                        areaStyle: {
                            type: "default"
                        }
                    }
                },
                data: mData
            }]
        };*/
        var option = {
            title: {
                subtext: '时段产出'
            },
            tooltip: {
                trigger: 'axis'
            },
            /*toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },*/
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    // data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    data: myTimeData
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            grid: {
                x: 55,
                y: 45,
                x2: 29,
                y2: 20,
                borderWidth: 1
            },
            series: [
                {
                    name: '电视机产量',
                    type: 'bar',
                    // data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                    data: mData,
                    /*markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },*/
                    itemStyle: {
                        normal: {
                            label: {
                                show: true, //开启显示
                                position: 'top', //在上方显示
                                textStyle: { //数值样式
                                    color: 'gray',
                                    fontSize: 14
                                }
                            }
                        }
                    }
                    // 辅助线
                    ,
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };
        myCharts.setOption(option);

        return myCharts;
    }
</script>
<script>
    var qgInter;
    var vm = new Vue({
        el: '#app',
        data: {
            number: -1,
            dateNow: '',
            line: '',
            linename: '',
            jibenxinxi: {
                id: '',
                maktx: '',
                gamng: '',
                tlmng: '',
                wgmng: '',
                headPerson: '',
                personNumber: '',
                dachenglv: '',
                createTime: '',
                passLv: '',
                hourWgmng: ''
            },
            selected: '',
            columns1: [
                {
                    title: '时间段',
                    key: 'hourOfTimeString',
                    align: 'center'
                },
                {
                    title: '投入量',
                    key: 'tlmng',
                    align: 'center'
                },
                {
                    title: '产出量',
                    key: 'wgmng',
                    align: 'center'
                },

                {
                    title: '异常量',
                    key: 'alarmmng',
                    align: 'center'
                }
            ],
            columns2: [
                {
                    title: 'MES工单号',
                    key: 'id',
                    align: 'center',
                    width: 180
                },
                {
                    title: 'MES销单号',
                    key: 'kdauf',
                    align: 'center',
                    width: 210
                },
                {
                    title: '工单类型',
                    key: 'orderTypeName',
                    align: 'center'
                },
                {
                    title: '机型',
                    key: 'type',
                    align: 'center'
                },
                {
                    title: '工单数量',
                    key: 'gamng',
                    align: 'center'
                },
                {
                    title: '结余',
                    key: 'jieyu',
                    align: 'center'
                },
                {
                    title: '累计产出',
                    key: 'wgmng',
                    align: 'center'
                },
                {
                    title: '历史产出',
                    key: 'hisWgmng',
                    align: 'center'
                },
                {
                    title: '今日投入',
                    key: 'todayTlmng',
                    align: 'center'
                },
                {
                    title: '今日产出',
                    key: 'todayWgmng',
                    align: 'center'
                },
                {
                    title: '计划达成率',
                    key: 'planAchin',
                    align: 'center'
                },
                {
                    title: '今日不良',
                    key: 'todayYcmng',
                    align: 'center'
                },
                {
                    title: '累计异常量',
                    key: 'ycmng',
                    align: 'center'
                },
                {
                    title: '直通率',
                    key: 'todayPass',
                    align: 'center'
                }
            ],
            data1: [],
            data2: [],
        },
        created: function () {
            // 先检测cookie
            yvan.passCookie();
            // 检测浏览器
            // yvan.passChrome();
            // 请求线体信息 -- 用于下拉框的线体选择显示
            util.requestget('/safe_usercenter/base/getOrganizeViewByDataType?dataType=6', function (e) {
                var line = e.result;
                vm.line = line;
            });
        },
        methods: {
            changge: function (sta) {
                vm.linename = sta.label;
                // 请求当前工单的状态和数据
                var myData = [];
                var myTimeData = [];

                // 显示线体生产时间
                vm.dateNow = yvan.getMyDate(new Date(), 'y-m-d');

                function qg() {
                    util.requestget('/mes/kb/getRealProductionGroupLine?lineCode=' + sta.value, function (e) {
                        if (e.result.view) {
                            myData = [];
                            myTimeData = [];
                            var data1 = e.result.trend;
                            for (let i = 0; i < data1.length; i++) {
                                data1[i].wholePoint1 = yvan.getMyDate(data1[i].wholePoint, 'm-d-h-i');
                                data1[i].hourOfTime = yvan.getMyDate((parseInt(data1[i].wholePoint) + 60 * 60 * 1000), 'h-i');
                                data1[i].hourOfTimeString = data1[i].wholePoint1 + " - " + data1[i].hourOfTime;
                            }
                            vm.data1 = data1;
                            for (let i = 0; i < e.result.trend.length; i++) {
                                myData.push(e.result.trend[i].wgmng); // 完工数量
                                myTimeData.push(yvan.getMyDate(e.result.trend[i].wholePoint, 'h-i')); // 完工节点对应的时间
                            }
                            // 基本信息属性赋值
                            vm.jibenxinxi.id = e.result.view.id;
                            vm.jibenxinxi.maktx = e.result.view.maktx;
                            vm.jibenxinxi.createTime = yvan.getMyDate(e.result.view.createTime, 'y-m-d-h-i-s');
                            var wgmng = e.result.view.wgmng; // 临时定义的完工变量 -- 以后用不到可以删除
                            util.requestget('/mes/kb/getLineMesOrderYield?lineCode=' + sta.value, function (e) {
                                // 定义总量变量
                                var gamngAll = 0, hisWgmngAll = 0, tlmngAll = 0, wgmngAll = 0, ycmngAll = 0;
                                for (let i = 0; i < vm.data2.length; i++) {
                                    gamngAll += vm.data2[i].gamng;
                                    hisWgmngAll += vm.data2[i].hisWgmng;
                                    tlmngAll += vm.data2[i].todayTlmng;
                                    wgmngAll += vm.data2[i].todayWgmng;
                                    ycmngAll += vm.data2[i].todayYcmng;
                                }

                                // 算出今日计划 -- 凸显
                                // 计算结余
                                for (let i = 0; i < vm.data2.length; i++) {
                                    vm.data2[i].todayPlan = gamngAll - hisWgmngAll;
                                }
                                vm.jibenxinxi.gamng = gamngAll - hisWgmngAll;
                                vm.jibenxinxi.tlmng = tlmngAll;
                                vm.jibenxinxi.wgmng = wgmngAll;
                                vm.jibenxinxi.dachenglv = vm.jibenxinxi.gamng == 0 ? yvan.toPercent(0) : yvan.toPercent(vm.jibenxinxi.wgmng / vm.jibenxinxi.gamng);
                                vm.jibenxinxi.passLv = vm.jibenxinxi.wgmng == 0 ? yvan.toPercent(0) : yvan.toPercent(1 - (ycmngAll / vm.jibenxinxi.wgmng));
                                vm.jibenxinxi.hourWgmng = data1.length == 0 ? 0 : (vm.jibenxinxi.wgmng / data1.length).toFixed(1);
                            });

                            // 图表显示
                            getMycharts(myData, myTimeData);
                        } else {
                            vm.jibenxinxi = {
                                id: '',
                                maktx: '',
                                gamng: '',
                                tlmng: '',
                                wgmng: '',
                                headPerson: '',
                                personNumber: '',
                                dachenglv: '',
                                createTime: '',
                                passLv: '',
                                hourWgmng: ''
                            };
                            var cc = getMycharts(myData, myTimeData);
                            cc.dispose();
                            vm.data1 = [];
                        }
                    })
                };
                qg();

                // 线体信息总览表
                function qz() {
                    util.requestget('/mes/kb/getLineMesOrderYield?lineCode=' + sta.value, function (e) {
                        vm.data2 = [];
                        vm.data2 = e.result;
                        for (let i = 0; i < vm.data2.length; i++) {
                            vm.data2[i].hisWgmng = vm.data2[i].wgmng - vm.data2[i].todayWgmng;
                            vm.data2[i].planAchin = yvan.toPercent(vm.data2[i].wgmng / vm.data2[i].gamng);
                            vm.data2[i].todayPass = vm.data2[i].wgmng == 0 ? yvan.toPercent(0) : yvan.toPercent((1 - (vm.data2[i].ycmng / vm.data2[i].wgmng)));
                            vm.data2[i].jieyu = vm.data2[i].gamng - vm.data2[i].wgmng;
                        }
                    })
                }

                qz();

                // 启动定时器
                clearInterval(qgInter);
                qgInter = setInterval(function () {
                    qg();
                    qz();
                    // qc();
                    yvan.passCookie();
                }, 5000);

                // 请求线长
                util.requestget('/safe_usercenter/base/getOrganizeViewByCode?code=' + sta.value, function (e) {
                    vm.jibenxinxi.headPerson = e.result.headOfUnitName;
                    vm.jibenxinxi.personNumber = e.result.personNumber;
                });


            }
        }
    })


</script>
</html>
